<template>
  <MenuPage>
<!--  <div class="asset-detail-content">-->
    <template slot="title">
      <RadioGroup v-model="componentName" type="button">
        <Radio label="part">部件</Radio>
        <!--      <Radio label="vulnerability">漏洞</Radio>-->
        <Radio label="module">专用组件</Radio>
        <Radio label="component">公共组件</Radio>
      </RadioGroup>
    </template>
<!--    <div class="asset-detail-content-components">-->
     <template slot="content">
      <part-manage v-if="componentName === 'part'" page-pos="bottom" productId="" ref="partManage"></part-manage>
      <module-manage v-if="componentName === 'module'" page-pos="bottom" productId=""></module-manage>
      <commonComponent v-if="componentName === 'component'" page-pos="bottom"  productId=""></commonComponent>
     </template>
<!--    </div>-->
<!--  </div>-->
  </MenuPage>
</template>

<script>
import PartManage from './detail/part-manage'
import ModuleManage from "./detail/module-manage.vue";
import commonComponent from './detail/commonComponent.vue'

export default {
  name: 'AssetDetailContent',
  components: {
    PartManage,
    ModuleManage,
    commonComponent
  },
  props: {
    productId: {
      type: String,
      default: ''
    },
    productInfo:{
      type:Object,
      default: ()=>{}
    },
  },
  data() {
    return {
      componentName: 'part'
    }
  },
  methods: {
    init() {
      this.componentName = 'part'
      this.$nextTick(() => {
        this.$refs.partManage.getNewData()
      })
    }
  }
}
</script>

<style scoped>
.asset-detail-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

}
.asset-detail-content .asset-detail-content-components {
  margin-top: 20px;
  flex: 1;
  height: 0;
}
.item-table {
  display: table;
  width: 100%;
  border: 1px solid #eee;
  table-layout: fixed;
  word-break: break-all;
}
.item-table p {
  display: table-row;
  line-height: 36px;
  text-align: center;
}
.item-table p span {
  display: table-cell;
  border-bottom: 1px solid #eee;
}
.ios-alert {
  /* position: absolute;
        top: -44px;
        right: -404px; */
  color: orange;
  font-size: 16px;
  cursor: pointer;
}
.too {
  position: absolute;
  left: 113px;
  top: -1px;
}
</style>
